import React from 'react'
import { observable, define, autorun } from '@formily/reactive'
import { observer } from '@formily/reactive-react'
import { FormPath } from '@formily/shared'

// const obs = observable({
//   value: 'Hello world',
// })
//
// const target: any = {
//   aa: {},
// }
// define(target, {
//   aa: observable,
// })
//
// const handler = (value: any) => {}
//
// autorun(() => {
//   handler(FormPath.getIn(target, 'aa.bb.cc'))
// })
//
// target.aa.bb = { cc: { dd: { ee: 123 } } }
// target.aa = { hh: 123 }
//

export default () => {
  return <div>test</div>
}

// export default observer(() => {
//   return (
//     <div>
//       <div>
//         <input
//           style={{
//             height: 28,
//             padding: '0 8px',
//             border: '2px solid #888',
//             borderRadius: 3,
//           }}
//           value={obs.value}
//           onChange={(e) => {
//             obs.value = e.target.value
//           }}
//         />
//       </div>
//       <div>{obs.value}</div>
//     </div>
//   )
// })
